<script>
import ImageAvater from "../../../components/shiqinComponents/pageComponents/imageAvater.vue";

export default {
  name: "familyManagement",
  components: {ImageAvater},
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    goToPath(){
      console.log(this.info)
      this.$nav.navigateTo('/pages/familyPage/familyEdit',{family_id:this.info.id,code:this.info.code})
    },
    switchFamilies(){
      this.$store.commit('setSelectedFamily', this.info)
      this.$store.dispatch('setFamilyDetail')
      setTimeout(()=>{
        uni.navigateBack()
      },100)
    }
  },
}
</script>

<template>
  <view class="familyManagement mt-25 row items-center justify-between">
    <view class="familyManagement_left allColumnCenter justify-center" @click.stop="goToPath">
      <image class="familyManagement_left_image" src="/static/shiqin-images/people.png" mode="widthFix"></image>
      <text class="familyManagement_left_text">管理</text>
    </view>
    <view class="familyManagement_right row items-center justify-between" @click.stop="switchFamilies">
      <view class="familyManagement_right_info">
        <view class="familyManagement_right_info_name row items-center">
          <text class="familyManagement_right_info_name_text">{{ info.name }}</text>
<!--          <view class="familyManagement_right_info_name_remarks ml-5 allRowCenter" v-if="!!info.remarks">-->
<!--            <text class="familyManagement_right_info_name_remarks_text">{{info.remarks}}</text>-->
<!--          </view>-->
<!--          <image class="familyManagement_right_info_name_image ml-17" src="/static/shiqin-images/edit.png"-->
<!--                 mode="widthFix"></image>-->
        </view>
        <view class="familyManagement_right_info_code" style="margin: -5rpx 0 8rpx 0">
          <text class="familyManagement_right_info_code_text">家庭号：{{ info.code }}</text>
        </view>
        <view class="familyManagement_right_info_imageList row items-center">
          <image-avater v-for="(item,index) in info.image_list" :key="index" :width="45" :height="45"
                        margin="0 0 0 0" :src="item" v-if="index < 8"></image-avater>
        </view>
      </view>
      <view class="familyManagement_right_icon row items-center">
        <image class="familyManagement_right_icon_code mr-22" src="/static/shiqin-images/qrcode.png" mode="widthFix"></image>
        <image class="familyManagement_right_icon_arrow mr-11" src="/static/shiqin-images/arrow_right.png"
               mode="widthFix"></image>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.familyManagement {
  width: 702rpx;

  .familyManagement_left {
    width: 101rpx;
    height: 153rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .familyManagement_left_image {
      width: 49rpx;
    }

    .familyManagement_left_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #292929;
    }
  }

  .familyManagement_right {
    width: 581rpx;
    height: 153rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .familyManagement_right_info {
      padding: 12rpx 21rpx;

      .familyManagement_right_info_name {
        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #292929;
        }

        .familyManagement_right_info_name_remarks {
          height: 30rpx;
          padding: 0 17rpx;
          background: #FF7950;
          border-radius: 15rpx 15rpx 15rpx 15rpx;
          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 16rpx;
            color: #FFFFFF;
          }
        }

        &_image {
          width: 30rpx;
        }
      }

      .familyManagement_right_info_code {
        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #4B4B4B;
        }
      }
    }

    .familyManagement_right_icon {
      .familyManagement_right_icon_code {
        width: 30rpx;
        height: 30rpx;
      }

      .familyManagement_right_icon_arrow {
        width: 37rpx;
      }
    }
  }
}
</style>